<template>
  <!-- 隐患处理 -->
  <view v-if="data.length > 0">
    <view v-for="(item, index) in data" :key="index" class="grid-body">
      <view class="check grid-common list-cell list-cell-arrow" @click="goOperationDetail(item)">
        <view class="flex text">
          风险分析对象：
          <text>{{ item.riskObjName }}</text>
        </view>
        <view class="flex text">
          风险分析单元：
          <text>{{ item.riskUnitName }}</text>
        </view>
        <view v-if="item.dangerLevelLabel" class="flex text">
          重大危险源等级：
          <text class="bg-select" :class="styleSelector(item.dangerLevel)">{{ item.dangerLevelLabel }}</text>
        </view>
        <view class="flex text">
          风险等级：
          <text class="bg-select" :class="styleSelector(item.inherentRiskLevel)">{{
            item.inherentRiskLevelLabel
          }}</text>
        </view>
        <view class="flex text">
          排查任务数：
          <text class="bg-select" :class="styleSelector(item.inherentRiskLevel)">{{ item.taskCount }}</text>
        </view>
      </view>
    </view>
  </view>
  <view v-else><empty></empty></view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
export default {
  name: 'task',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      textColor: true
    }
  },

  methods: {
    styleSelector(option) {
      return 'level_' + option
    },
    goOperationDetail(item) {
      uni.navigateTo({
        url: '/pages/work/controlCheck/index?riskIdentificationId=' + item.riskIdentificationId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-body {
  margin-top: 24rpx;
  &:last-child {
    margin-bottom: 24rpx;
  }
}
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
